<template>
	<div class="container">
		<div class="classify">
			<ul>
				<li><a href="/">全部</a></li>
				<li @click="findByCid(1)"><a>手机</a></li>
				<li @click="findByCid(2)"><a>电脑</a></li>
				<li @click="findByCid(3)"><a>外设</a></li>
				<li @click="findByCid(1)"><a>其他</a></li>
			</ul>
		</div>
		<div>
			<el-input v-model="sousuo" placeholder="搜索商品" style="width: 300px;"></el-input>
			<el-button type="primary" @click="search" style="margin-left: 15px;">搜索</el-button>
		</div>
		<hr />
		<div class="cards cards-borderless">
			<div v-for="item in goods" v-bind:key="item.gid" class="col-md-4 col-sm-6 col-lg-3">
				<a class="card" @click="gotoparams(item)">
					<img :src="item.gsrc" alt="" />
					<div class="caption">{{item.gname}}</div>
					<div class="card-heading"><strong>售价:￥{{item.gprice}}</strong></div>
					<div class="card-content text-muted">
						{{item.gname}}
					</div>
				</a>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: "card",
		data() {
			return {
				goods: [],
				sousuo: ''
			}
		},
		methods: {
			gotoparams(good) {
				// console.log(good);
				this.$router.push({
					name: "good",
					params: {
						good: good
					}
				});
			},
			search() {
				var str = this.sousuo;
				var res = [];
				this.goods.forEach(function(value) {
					if (value.gname.indexOf(str) >= 0) {
						res.push(value);
					}
				});
				this.goods = res;
			},
			findByCid(cid) {
				const config = {
					url: 'http://localhost:8080/json/good/findGoodByType?cid='+cid,
					method: 'get'
				}
				// 默认get请求
				this.$axios(config).then(result => {
					// console.log(result.data)
					result.data.forEach(function(item) {
						item.gsrc = "http://localhost:8080/json/imgs/" + item.gsrc
					});	
					this.goods = result.data
				})
			}
		},
		created() {
			const config = {
				url: 'http://localhost:8080/json/good/goodList',
				method: 'get'
			}
			// 默认get请求
			this.$axios(config).then(result => {

				result.data.forEach(function(item) {
					item.gsrc = "http://localhost:8080/json/imgs/" + item.gsrc
					// require('../assets/images/'+item.gsrc);
					console.log(item.gsrc)
				});
				this.goods = result.data;
			})
		}
	};
</script>

<style>
	@import "../assets/css/zui.css";
	.classify a {
		color: #777;
	}
	.classify ul {
		display: flex;
	}
	.classify li {
		width: 50%;
		height: 39px;
		background-color: #fff;
		list-style: none;
		line-height: 39px;
		text-align: center;
		color: #777;	
		font-size: 17px;
		border-left: 1px solid #ccc;
	}
	.classify li:last-child{
		border-right: 1px solid #ccc;
	}
</style>
